﻿<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="galleria.aspx.vb" Inherits="ProjetoDeTestes.galleria" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>galleria</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script src="galleria.js" type="text/javascript"></script>
    <style type="text/css">
        #galleria
        {
            height: 400px;
            width: 50%;
            float: right;
        }
        #divLista
        {
            height: 400px;
            width: 40%;
            float: left;
        }
        #lnkTelaCheia
        {
            position: absolute;
            bottom: 10px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div id="divLista">
                <asp:DataList ID="DataList1" runat="server">
                    <HeaderTemplate>
                        Imagens Encontradas<br />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                    </FooterTemplate>
                </asp:DataList>
            </div>
            <div id="galleria" runat="server"></div>
            <p>
                <a href="#" id="lnkTelaCheia">Ver em Tela Cheia</a></p>
        </ContentTemplate>
    </asp:UpdatePanel>
    <script type="text/javascript">
        Galleria.loadTheme("themes/classic/galleria.classic.js");
        $('#<%=galleria.ClientID %>').galleria({
            on_image: function (image, thumb) {
                var gallery = this;
                $(image).click(function () {
                    gallery.enterFullscreen();
                })
            },
           extend: function() {
                this.bind(Galleria.THUMBNAIL, function (e) {
                    this.bindTooltip(e.imageTarget, this.getData(e.index).alt);
                });
                this.bindTooltip(this.get('images'), 'My thumbnails');
            }
        });

        $(".galleria-container fullscreen").click(function () {
            gallery.exitFullscreen();
        });

//        this.attachKeyboard({
//            left: this.prev, // applies the native prev() function
//            right: this.next,
//            up: function () {
//                // custom up action
//                alert('---1');
//            },
//            13: function () {
//                // start playing when return (keyCode 13) is pressed:
//                this.play(3000);
//            }
//        });

        $('#lnkTelaCheia').click(function () {
            Galleria.loadTheme('themes/fullscreen/galleria.fullscreen.js');
        });
    </script>
    </form>
</body>
</html>
